<template>
	<view class="index">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				{{x_name}}充电宝
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="map">
			<map id="map" :longitude="longitude" :latitude="latitude" scale="16" :markers="markers"
				@markertap="markertap" @regionchange="regionchange"></map>
		</view>
		<!--  -->
		<view class="cebiandingwei">
			<image :src="baseUrl + '/wximage/index_sousuo.png'" @click="getLocation"></image>
			<view class="hengxian"></view>
			<image :src="baseUrl + '/wximage/index_dingwei.png'" @click="dingwei"></image>
		</view>
		<view class="footer">
			<view class="shang clearfix">
				<view class="zuo fl clearfix" @click="topage('/pages/index/nearstore')">
					<image :src="baseUrl + '/wximage/index_mendian.png'" class="fl"></image>
					<view class="name fl">附近门店</view>
				</view>
				<view class="zuo fl clearfix" @click="topage('/pages/user/question')">
					<image :src="baseUrl + '/wximage/index_fankui.png'" class="fl"></image>
					<view class="name fl">遇到问题</view>
				</view>
				<view class="zuo fr" @click="call">
					<image :src="baseUrl + '/wximage/index_kefu.png'" class="fl"></image>
					<view class="name fl">联系客服</view>
				</view>
			</view>
			<view class="xia" v-if="mapInfo">
				<view class="center clearfix">
					<view class="left fl">
						<image :src="stationAll.sitepicture"></image>
					</view>
					<view class="zhong fl">
						<view class="title">{{stationAll.name}}</view>
						<view class="zhuangtai clearfix">
							<image :src="baseUrl + '/wximage/index_wu.png'" v-if="stationAll.systatus == 1"></image>
							<view class="desc" v-if="stationAll.systatus == 1">不可租借</view>
							<image :src="baseUrl + '/wximage/index_you.png'" v-if="stationAll.systatus == 2"></image>
							<view class="desc" v-if="stationAll.systatus == 2">可租借</view>
							<image :src="baseUrl + '/wximage/index_wu.png'" v-if="stationAll.ghstatus == 1"></image>
							<view class="desc" v-if="stationAll.ghstatus == 1">不可归还</view>
							<image :src="baseUrl + '/wximage/index_you.png'" v-if="stationAll.ghstatus == 2"></image>
							<view class="desc" v-if="stationAll.ghstatus == 2">可归还</view>
						</view>
						<view class="address">{{stationAll.full_address}}</view>
					</view>
					<view class="dingwei clearfix" @click="daohang(stationAll)">
						<view class="img fl">
							<image :src="baseUrl + '/wximage/index_weizhi.png'"></image>
						</view>
						<view class="juli fl">{{stationAll.juli}}km</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				longitude: '',
				latitude: '',
				markers: [],
				x_tell: '',
				x_name: '',
				zfb_name: '',
				map_image: '',
				mymap_image: '',
				mapInfo: false,
				stationAll: {},
				scrollTimer: null,
			}
		},
		onLoad() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}

			//获取基本配置信息
			this.request({
				url: '/xcx/webconfig',
				data: {}
			}).then(res => {
				if (res.data.code == 200) {
					this.x_tell = res.data.data.x_tell;
					this.map_image = res.data.data.map_image;
					this.mymap_image = res.data.data.mymap_image;
					this.x_name = res.data.data.x_name;
					this.zfb_name = res.data.data.zfb_name;

					// #ifdef MP-ALIPAY
					my.setNavigationBar({
						frontColor: '#000000',
						backgroundColor: '#ffffff',
					})
					let title = this.zfb_name + '充电宝';
					// 设置导航栏标题
					my.setNavigationBar({
						title: title
					})
					// #endif

					this.latitude = uni.getStorageSync('latitude');
					this.longitude = uni.getStorageSync('longitude');

					this.initMap(this.latitude, this.longitude)
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})

			this.mapCtx = uni.createMapContext('map') //获取地图上下文
		},
		methods: {
			initMap(lat, lng) {
				console.log(this.scrollTimer)
				if (this.scrollTimer != null) {
					const points = [];
					this.markers = [];

					this.markers.push({
						id: 0,
						latitude: this.latitude,
						longitude: this.longitude,
						width: 30,
						height: 30,
						iconPath: this.mymap_image, // 标注的图标地址
					});

					this.request({
						url: '/agent/stationmap',
						data: {
							lat: lat,
							lng: lng,
						},
						method: "POST"
					}).then(res => {
						if (res.data.code == 200) {
							let list = res.data.data;

							for (let i = 0; i < list.length; i++) {
								points.push({
									id: list[i].id,
									latitude: list[i].lat,
									longitude: list[i].lng,
								})
							}

							points.forEach((point, index) => {
								this.markers.push({
									id: point.id,
									latitude: point.latitude,
									longitude: point.longitude,
									width: 20,
									height: 20,
									iconPath: this.map_image, // 标注的图标地址
								});
							});

							clearTimeout(this.scrollTimer);
							console.log(this.scrollTimer)
						}
					})
				}
			},
			markertap(e) {
				let id = e.markerId;

				// 站点信息
				this.request({
					url: '/agent/stationinfo',
					data: {
						id: id,
						lat: this.latitude,
						lng: this.longitude,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.stationAll = res.data.data;
						this.mapInfo = true;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			daohang(stationAll) {
				const latitude = Number(stationAll.lat);
				const longitude = Number(stationAll.lng);
				const name = stationAll.name;
				const address = stationAll.full_address;
				uni.getLocation({
					success(res) {
						uni.openLocation({
							name: name,
							address: address,
							latitude: latitude,
							longitude: longitude,
							scale: 15
						});
					}
				});
			},
			dingwei() {
				let that = this;

				that.latitude = uni.getStorageSync('latitude');
				that.longitude = uni.getStorageSync('longitude');

				this.markers.push({
					id: 0,
					latitude: that.latitude,
					longitude: that.longitude,
					width: 30,
					height: 30,
					iconPath: that.mymap_image, // 标注的图标地址
				});
			},
			// 移动或缩放地图
			regionchange(e) {
				let that = this;
				if (e.type == 'end') {
					that.scrollTimer = setTimeout(() => {
						console.log(123)
						that.mapCtx.getCenterLocation({
							success(res) { //获取移动地图之后的中心坐标
								that.longitude = res.longitude;
								that.latitude = res.latitude;

								const latitude = res.latitude
								const longitude = res.longitude

								if ((that.longitude - longitude) < 0.000005 && (that.longitude -
									longitude) > 0 &&
									latitude == that.latitude) { // 对静态移动标点做限制防止偏移
									return
								}

								// that.markers = [];
								// that.markers.push({
								// 	id: 0,
								// 	latitude: that.latitude,
								// 	longitude: that.longitude,
								// 	width: 30,
								// 	height: 30,
								// 	iconPath: that.mymap_image, // 标注的图标地址
								// });
								that.initMap(that.latitude, that.longitude)
							}
						});
					}, 1000)
				}
			},
			getLocation() {
				this.mapInfo = false;

				let that = this;
				uni.chooseLocation({
					success: (res) => {
						that.latitude = res.latitude;
						that.longitude = res.longitude;

						// that.initMap(that.latitude,that.longitude)
					}
				});
			},
			call() {
				let tell = this.x_tell;
				uni.makePhoneCall({
					phoneNumber: tell,
					success(res) {

					},
					fail(res) {

					}
				})
			},
			fanhui() {
				uni.navigateBack();
			},
			topage(url) {
				this.mapInfo = false;

				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		margin: 0 auto;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: rgba(255, 255, 255, 0.7);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
			}

			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}

		.map {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			height: 100vh;

			map {
				width: 100%;
				height: 100%;
			}
		}

		.cebiandingwei {
			position: fixed;
			top: 34%;
			right: 20rpx;
			z-index: 99;
			width: 80rpx;
			background: #fff;
			border-radius: 40rpx;
			text-align: center;
			padding: 16rpx 0;
			box-sizing: border-box;

			image {
				width: 56rpx;
				height: 56rpx;
			}

			.hengxian {
				width: 56rpx;
				height: 2rpx;
				background: #CDCDCD;
				margin: 0 auto;
				margin-bottom: 10rpx;
				margin-top: 4rpx;
			}
		}

		.footer {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;

			.shang {
				width: 100%;
				padding: 14rpx 20rpx;
				box-sizing: border-box;

				.zuo {
					width: 200rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: #fff;
					border-radius: 34rpx;
					margin-right: 20rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-left: 20rpx;
						margin-top: 8rpx;
					}

					.name {
						font-size: 24rpx;
						color: #333333;
					}
				}

				.you {

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.zuo:nth-of-type(3) {
					margin-right: 0;
				}
			}

			.xia {
				width: 100%;
				background: #fff;
				padding: 0 20rpx;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
				padding-top: 20rpx;
				padding-bottom: 50rpx;

				.center {
					width: 100%;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					background: #FAFAFA;
					border-radius: 6rpx;
					position: relative;

					.left {
						margin-right: 30rpx;

						image {
							width: 140rpx;
							height: 140rpx;
							display: flex;
						}
					}

					.zhong {
						width: 50%;

						.title {
							font-size: 28rpx;
							color: #333333;
							margin-top: 10rpx;
						}

						.zhuangtai {
							margin-top: 4rpx;

							image {
								width: 20rpx;
								height: 20rpx;
								display: inline-block;
							}

							.desc {
								display: inline-block;
								margin-left: 6rpx;
								margin-right: 20rpx;
								font-size: 24rpx;
								color: #333333;
							}
						}

						.address {
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.dingwei {
						position: absolute;
						bottom: 20rpx;
						right: 16rpx;
						width: 170rpx;
						height: 52rpx;
						line-height: 52rpx;
						border: 1rpx solid #333333;
						border-radius: 28rpx;

						.img {
							margin-left: 16rpx;
							margin-right: 4rpx;

							image {
								width: 24rpx;
								height: 24rpx;
							}
						}

						.juli {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>